<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		body{
			background: #FF7B86 url() 0 0 no-repeat;
		}
		li{
			list-style: none;
		}
		.out{
			width: 330px;
			margin-left: -160px;
			margin-top: -125px;
			height: 250px;
			background: #9BD1EB url() 0 0 no-repeat;
			/*margin: 0 auto;*/
			position: absolute;
			top:50%;
			left: 50%;
			padding-top: 20px;
			padding-left: 20px;
			box-sizing: border-box;
			border-radius: 3px;
			box-shadow: 0px 3px 0px #0C9BE2;
		}
		.item{
			width: 65px;
			height: 35px;
			background: #FFFFFF url() 0 0 no-repeat;
			float: left;
			margin-right: 10px;
			margin-bottom: 10px;
			line-height: 35px;
			text-align: center;
			font-size: 12px;
			color: #948E8F;
			font-weight: 800;
			border-radius: 3px;
			box-shadow: 0px 3px 0px #0C9BE2;
			cursor: pointer;
		}
		.show{
			width:215px;
			background: #79A5BA url() 0 0 no-repeat; 
			color: #fff;
			font-size: 16px;
			text-align: right;
			padding-right: 5px;
			box-sizing: border-box;
			box-shadow: 0px 3px 0px #618392 inset;
			height: 38px;
		}
		.clear{
			background: #FF9EA8 url() 0 0 no-repeat;
			color: #fff;
			box-shadow: 0px 3px 0px #FF7B86;
		}
		.res{
			background: #F2FF92 url() 0 0 no-repeat;
			box-shadow: 0px 3px 0px #9CA752;
		}
		.yunsuan{
			background: #FFF2F5 url() 0 0 no-repeat;
		}
	</style>
	<script type="text/javascript">
		window.onload = function () {
			
			clear =  document.getElementById('clear');

			res =  document.getElementById('res');

			show =  document.getElementById('show');

			num = document.getElementsByClassName('num');

			yunsuan = document.getElementsByClassName('yunsuan');
			//清除
			clear.onclick= function (argument) {
				show.innerHTML='0';
				showStr = '';
			}
			//运算
			res.onclick= function (argument) {
				if(is_yunsuan()){
					alert("无法运算")
				}

				var res = eval(showStr);

				showStr = res;

				show.innerHTML=showStr;
			}

			showStr = "";
			//循环给数字加事件
			for (var i = 0; i <num.length; i++) {
				num[i].onclick = function () {
					str = this.innerHTML;
					showStr +=str;
					show.innerHTML=showStr;
				}
			}
			//给运算加事件
			for (var i = 0; i <yunsuan.length; i++) {
				yunsuan[i].onclick = function () {
					str = this.innerHTML;
					if(is_yunsuan()){
						showStr = showStr.slice(0,showsStr.length-1);
					}
					showStr +=str;
					show.innerHTML=showStr;
				}
			}
			// 判断最后一个是否运算符
			function is_yunsuan() {
				var last = showStr[showStr.length-1];
				var yunsuan = "+-*/";
				if(yunsuan.indexOf(last)=='-1'){
					return false;
				}else{
					return true;
				}
			}
		}
	</script>
</head>
<body>
	<ul class="out">
		<li class="item clear" id="clear" >C</li>
		<li class="item show" id="show">0</li>
		<li class="item num">7</li>
		<li class="item num">8</li>
		<li class="item num">9</li>
		<li class="item yunsuan">+</li>
		<li class="item num">4</li>
		<li class="item num">5</li>
		<li class="item num">6</li>
		<li class="item yunsuan">-</li>
		<li class="item num">1</li>
		<li class="item num">2</li>
		<li class="item num">3</li>
		<li class="item yunsuan">/</li>
		<li class="item num">0</li>
		<li class="item num">.</li>
		<li class="item res" id="res">=</li>
		<li class="item yunsuan">*</li>
	</ul>
</body>
</html>